<script setup lang="ts">
import { defineProps } from 'vue'

defineProps<{ msg: string }>()
</script>

<template>
  <h1 class="text-3xl font-bold">{{ msg }}</h1>
  <div>
    <div class="w-16 h-16 bg-gray-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-slate-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-red-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-orange-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-yellow-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-lime-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-teal-500 inline-block m-4"></div>
  </div>
  <div>
    <div class="w-16 h-16 bg-green-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-sky-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-blue-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-indigo-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-purple-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-pink-500 inline-block m-4"></div>
    <div class="w-16 h-16 bg-rose-500 inline-block m-4"></div>
  </div>
</template>

<style scoped></style>

